<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>The Computability Menagerie</title>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}"/>
  <!-- SVG node styling. This needs to be inline for Firefox -->
  <style type="text/css">
    .countable ellipse, .countable rect {fill: gray;}
    .uncountableMeager ellipse, .uncountableMeager rect {fill: #66FFFF;}
    .uncountableComeager ellipse, .uncountableComeager rect {fill: #00FF00;}
    .uncountableUnknown ellipse {fill: url(#uncountableUnknown)}
    .unknownMeager ellipse {fill: url(#unknownMeager)}
    .unknownUnknown ellipse {fill: url(#unknownUnknown)}

    .level0 ellipse, .level0 rect {fill: gray;}
    .level1 ellipse, .level1 rect {fill: #66FFCC;}
    .level2 ellipse, .level2 rect {fill: #6699FF}
    .level3 ellipse, .level3 rect {fill: #CC33FF}
    .level4 ellipse, .level4 rect {fill: #FF0066}
    .level3-4 ellipse {fill: url(#level3-4)}
    .level2-3 ellipse {fill: url(#level2-3)}
    .level2-4 ellipse {fill: url(#level2-4)}
    .level1-2 ellipse {fill: url(#level1-2)}
    .level0-3 ellipse {fill: url(#level0-3)}
    .level1-4 ellipse {fill: url(#level1-4)}
    .level0-1 ellipse {fill: url(#level0-1)}
    .level0-2 ellipse {fill: url(#level0-2)}
    .level0-3 ellipse {fill: url(#level0-3)}
    .level0-4 ellipse {fill: url(#level0-4)}

    .above ellipse, .above rect {fill: #FFADAD;}
    .eqAbove ellipse {fill: url(#eqAbove);}
    .below ellipse, .below rect {fill: #ADADFF;}
    .eqBelow ellipse {fill: url(#eqBelow);}
    .inc ellipse, .inc rect {fill: lightgray;}
    .belowInc ellipse {fill: url(#belowInc);}
    .aboveInc ellipse {fill: url(#aboveInc);}
    .eqInc ellipse {fill: url(#eqInc);}

    .notBetw ellipse, .notBetw rect {fill: gray;}
    .betw ellipse, .betw rect {fill: lightcoral;}
    .possiblyBetw ellipse {fill: url(#possiblyBetw);}
    .selected ellipse, .selected rect {fill: gold;}
  </style>
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" />
  <script type="text/javascript" src="{{ url_for('static', filename='jquery-1.4.4.js') }}"></script>
   <script type="text/javascript">
     $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
     $CATEGORY = {{ category|tojson|safe }};
     $MEASURE = {{ measure|tojson|safe }};
   </script>
   <script type="text/javascript" src="{{ url_for('static', filename='hovertip.js') }}"></script>
   <script type="text/javascript" src="{{ url_for('static', filename='menagerie.js') }}"></script>
 </head>

 {% macro svgellipse(className) -%}
 <svg height="22pt" viewBox="0.00 0.00 42.00 22.00" width="42pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g class="{{ className }}"><ellipse cx="20" cy="10" rx="20" ry="10"/></g></svg>
 {%- endmacro %}

 {% macro stripePattern(patternName, classA, classB) -%}
 <pattern id="{{ patternName }}" x="0" y="0" width="20" height="80" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><g class="{{ classA }}"><rect x="0" y="0" width="10" height="80"/></g><g class="{{ classB }}"><rect x="10" y="0" width="10" height="80"/></g></pattern>
 {%- endmacro %}

 <body>
   <div id="controlPanel">
     <div id="controls">
       <table>
	 <tr>
	   <td><span id="numSelected">0</span> selected{% if excludedClasses %}, <a class="notALink" id="excludedClassesLink"><span>{{ excludedClasses|length }} excluded</span></a>
	   {% endif %}
	   </td>
	   <td><a class="notALink" id="showImplications"><span>Show implications</span></a></td>
	   <td id="showClassDetailsTd" style="display:none"><a class="notALink" id="showClassDetails"><span>Show class details</span></a></td>
	   <td><a class="notALink" id="viewSubgraph"><span>View subgraph</span></a></td>
	   <td><a class="notALink" id="excludeSelected"><span>Exclude selected</span></a></td>
	   <td><a class="notALink" id="unselectAll" onclick="unselectAll();"><span>Deselect all</span></a></td>
	   <td><select id="coloringModeSelector" onchange="currentColoring.handleSizeColoringToggle();"><option value="measure">Color by measure</option><option value="category">Color by category</option></select></td>
	   <td><a class="notALink" id="toggleHelp" title="click to toggle"><span>Help</span></a></td>
	   <td><a class="notALink" id="toggleKey" title="click to toggle"><span>Key</span></a></td>

	 </tr>
       </table>
     </div>

     <div id="help" style="display: none;">
       <h3>The Computability Menagerie</h3>
        <p>Curated and implemented by <a href="http://www.math.wisc.edu/~jmiller">Joseph S. Miller</a>, with web programming by <a href="http://www.math.wisc.edu/~khan">Mushfeq Khan</a>.</p>
	<p>The coloring of classes contains a great deal of information about their properties and their relations to other classes. We recommend enabling the color key (click "Key"). The coloring changes depending on how many classes are selected and the key changes accordingly. Here are a few things to try:</p>
       <ul>
	 
	 <li>Select/unselect classes by clicking on them.</li>
	 <li>Switch between coloring by "measure" (Hausdorff dimension, packing dimension and Lebesgue measure) and category using the dropdown.</li>
	 <li>Double-click on a class to see its properties in detail (opens a new tab). Alternatively, hover over the class to see a short summary.</li>
	 <li>When a single class is selected, the graph is recolored to indicate how other classes relate to the selected class.</li>
	 <li>When a pair of classes is selected, classes that are intermediate between them are highlighted.</li>
	 <li>Select a pair of classes, then click "Show implications" to see the implications between them (opens a new tab/window).</li>
	 <li>Select a group of classes, then click "View subgraph" to generate a subgraph consisting only of the selected classes.</li>
	 <li>Select a group of classes, then click "Exclude selected" to remove those classes from the graph.</li>
	 <li>Bookmark the page to save your settings.</li>
       </ul>
       <p>Finally, click "Help" to toggle this window.</p>
     </div>

     {% if excludedClasses %}
     <div id="excludedClasses" style="display: none;">
       <a href="{{ url_for('displayMenagerie') }}">Restore excluded classes:</a>
       <ul>
       {% for cls in excludedClasses %}
       <li>{{ cls|safe }}</li>
       {% endfor %}
       </ul>
     </div>
     {% endif %}
   </div>

  <div id="keys" style="display: none;">
    <div id="singleRecoloringKey" class="key" style="display: none;">
	<table>
	  <tr><td>{{ svgellipse("selected") }}</td><td>Selected</td></tr>
	  <tr><td>{{ svgellipse("above") }}</td><td>Superclass of selected class</td></tr>
	  <tr><td>{{ svgellipse("below") }}</td><td>Subclass of selected class</td></tr>
	  <tr><td>{{ svgellipse("inc") }}</td><td>Incomparable to selected class</td></tr>
	</table>
	Stripes indicate one or more unknown implications. Colors alternate between the possibilities.
    </div>
    <div id="measureKey" class="key" style="display: none;">
	<table>
	  <tr><td>{{ svgellipse("selected") }}</td><td>Selected</td></tr>
	  <tr><td>{{ svgellipse("level4") }}</td><td>Measure 1</td></tr>
	  <tr><td>{{ svgellipse("level3") }}</td><td>Hausdorff dimension 1, <br/>measure 0</td></tr>
	  <tr><td>{{ svgellipse("level2") }}</td><td>Packing dimension 0, <br/>Hausdorff dimension 1</td></tr>
	  <tr><td>{{ svgellipse("level1") }}</td><td>Uncountable, <br/>packing dimension 0</td></tr>
	  <tr><td>{{ svgellipse("level0") }}</td><td>Countable</td></tr>
	</table>
	Stripes indicate unknown measure information. Colors alternate between the possible extremes.
    </div>
    <div id="categoryKey" class="key" style="display: none;">
	<table>
	  <tr><td>{{ svgellipse("selected") }}</td><td>Selected</td></tr>
	  <tr><td>{{ svgellipse("uncountableComeager") }}</td><td>Comeager</td></tr>
	  <tr><td>{{ svgellipse("uncountableMeager") }}</td><td>Uncountable and meager</td></tr>
	  <tr><td>{{ svgellipse("countable") }}</td><td>Countable</td></tr>
	</table>
	Stripes indicate unknown category information. Colors alternate between the possible extremes.
    </div>
    <div id="pairRecoloringKey" class="key" style="display: none;">
	<table>
	  <tr><td>{{ svgellipse("selected") }}</td><td>Selected</td></tr>
	  <tr><td>{{ svgellipse("betw") }}</td><td>Intermediate</td></tr>
	  <tr><td>{{ svgellipse("notBetw") }}</td><td>Not intermediate</td></tr>
	</table>
	  Stripes indicate unknown implications.
    </div>
  </div>

  <table>
    <tr>
      <td>
	<div id="graph" style="width:{{ graph.attributes.width.value}}">
	  {{ graph.toxml() | safe }}
	</div>
      </td>
      <td>
	<div id="space"></div>
      </td>
    </tr>
  </table>

  <div class="hovertip"></div>

  <svg height="0pt" width="0pt" id="paintServers" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
      <defs>
	{{ stripePattern("eqAbove", "above", "selected") }}
	{{ stripePattern("eqBelow", "below", "selected") }}
	{{ stripePattern("aboveInc", "above", "inc") }}
	{{ stripePattern("belowInc", "below", "inc") }}
	{{ stripePattern("eqInc", "selected", "inc") }}
	{{ stripePattern("possiblyBetw", "betw", "notBetw") }}
	{{ stripePattern("uncountableUnknown", "uncountableMeager", "uncountableComeager") }}
	{{ stripePattern("unknownMeager", "countable", "uncountableMeager") }}
	{{ stripePattern("unknownUnknown", "countable", "uncountableComeager") }}
	{{ stripePattern("level3-4", "level3", "level4") }}
	{{ stripePattern("level2-3", "level2", "level3") }}
	{{ stripePattern("level2-4", "level2", "level4") }}
	{{ stripePattern("level1-2", "level1", "level2") }}
	{{ stripePattern("level0-3", "level0", "level3") }}
	{{ stripePattern("level1-4", "level1", "level4") }}
	{{ stripePattern("level0-1", "level0", "level1") }}
	{{ stripePattern("level0-2", "level0", "level2") }}
	{{ stripePattern("level0-3", "level0", "level3") }}
	{{ stripePattern("level0-4", "level0", "level4") }}
	

      </defs>
    </g>
  </svg>
</body>
</html>



















